<template>
<div class="mainBarcontainer">
  <div id="map"></div>
  <!-- <div id="scaleLine"></div> -->
</div>
</template>
<script>
import "ol/ol.css";
import "@assets/style/ol-custom.css";
import Map from "ol/Map";
import View from "ol/View";
import { Image as ImageLayer } from "ol/layer";
import ImageWMS from "ol/source/ImageWMS";
import { defaults as defaultControls, ScaleLine } from "ol/control";
import {
  defaults as defaultInteractions,
  DragRotateAndZoom
} from "ol/interaction";

import Global from "../../common.vue";

// import main from "@lib/main.js";
export default {
  name: "mainbar",
  data() {
    return {
      map: null
    };
  },
  methods: {
    /**
     * 初始化底图
     */
    initMap: function() {
      this.map = new Map({
        // controls: defaultControls().extend([]),
        // interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
        target: "map",
        layers: [
          Global.locus.layers.baseLayer,
          Global.locus.layers.surveyLayer,
          Global.locus.layers.profileLayer,
          Global.locus.layers.pipe_propertyLayer,
          Global.locus.layers.cableLayer,
          Global.locus.layers.buildingLayer,
          Global.locus.layers.electricalLayer
        ],
        view: new View({
          center: [120.560875, 30.630306],
          zoom: 13,
          projection: "EPSG:4326"
        })
      });
      // 添加控价
      this.map.addControl(Global.locus.controls.scaleLine);
      this.map.addControl(Global.locus.controls.mousePosition);
      this.map.addControl(Global.locus.controls.overView);
    },
    /**
     * 添加地图图层
     */
    addMapLayer() {
      // 空间土建表
      let buildingLayer = new VectorLayer({
        source: "http://localhost:8082/geoserver/tongxiang/wfs",
        params: {
          layers: "tongxiang:geo_civil_engineering"
        }
      });
      this.map.add(buildingLayer);
      // 空间电气表
      // let electricalLayer = new TileLayer({
      //   source: new TileWMSSource({
      //     url:'http://localhost:8082/geoserver/tongxiang/wms',
      //     params:{
      //       layers: 'tongxiang:geo_electrical'
      //     }
      //   })
      // });
      // this.map.addLayer(electricalLayer);
    }
  },
  mounted() {
    this.initMap();
    // this.addMapLayer();
  }
};
</script>
<style lang="scss" scoped>
@import "@assets/style/variables.scss";
.mainBarcontainer {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
  position: relative;
}
#scaleLine{
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 50px;
  height: 10px;
}
</style>